<template>
  <div class="person">
    <h2>我是Person组件，下面一共有{{pictures.length}}张图片</h2>
    <input type="text" placeholder="名字" v-model="name">
    <input type="text" placeholder="年龄" v-model.number="age">
    <button @click="addPerson">添加</button>
    <ul>
      <li v-for="p in persons" :key="p.id">{{ p.name }}--{{ p.age }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import {v4} from 'uuid'
export default {
  name: 'Person',
  data() {
    return {
      name: '',
      age: ''
    }
  },
  computed: {
    ...mapState(['persons','pictures'])
  },
  methods: {
    addPerson(){
      // 获取用户输入
      const {name,age} = this
      // 包装一个人对象
      const obj = {id:v4(),name,age}
      // 联系服务员，添加一个人
      this.$store.dispatch('addPerson',obj)
    }
  },
}
</script>

<style scoped>
.person {
  background-color: orange;
  border-radius: 10px;
  box-shadow: 0 0 10px;
  padding: 10px;
}

input {
  width: 100px;
  height: 20px;
  margin-right: 10px;
}
</style>